<template>
  <div>
    <userTitel :title="title"></userTitel>
    <!-- 卡片 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="运输任务编号: " style="margin-left: 40px">
          <el-input
            v-model="formObj.transportTaskId"
            style="width: 380px"
          ></el-input>
        </el-form-item>
        <el-form-item label="起始地机构" style="margin-left: 40px">
          <el-select
            v-model="formObj.startAgencyId"
            style="width: 380px"
            placeholder="请选择起始地机构"
          >
            <el-option
              hidden
              :label="formObj.startAgencyId"
              :value="formObj.startAgencyId"
            >
            </el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="目的地机构" style="margin-left: 40px">
          <el-select
            v-model="formObj.endAgencyId"
            style="width: 380px"
            placeholder="请选择目的地机构"
          >
            <el-option
              hidden
              :label="formObj.endAgencyId"
              :value="formObj.endAgencyId"
            >
            </el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClickOne"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="回车时间" style="margin-left: 70px">
          <el-date-picker
            style="width: 380px"
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆是否可用" style="margin-left: 27px">
          <el-select
            v-model="formObj.isAvailable"
            style="width: 380px"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.value"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 27px">
          <el-button
            @click="sousuo"
            style="width: 90px; padding-left: 30px"
            type="primary"
            >搜索</el-button
          >
          <el-button @click="reset" style="width: 90px; padding-left: 30px"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card shadow="never" style="margin-top: 20px">
      <el-table stripe :data="formData" height="250" border style="width: 100%">
        <el-table-column prop="id" label="运输任务编号" width="180">
        </el-table-column>
        <el-table-column prop="endAgencyName" label="起始地机构" width="180">
        </el-table-column>
        <el-table-column prop="startAgencyName" label="目的地机构">
        </el-table-column>
        <el-table-column prop="transportOrderNumber" label="运单数量">
        </el-table-column>
        <el-table-column prop="outStorageTime" label="出车时间">
        </el-table-column>
        <el-table-column prop="intoStorageTime" label="回车时间">
        </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column prop="isAvailable" label="车辆是否可用">
          <template #default="{ row }">
            <span
              :class="{
                gree: row.isAvailable === true,
                red: row.isAvailable === false,
              }"
            ></span>
            <span style="margin-left: 10px">{{
              row.isAvailable ? "可用" : "不可用"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link
              @click="chaKan(row)"
              :underline="false"
              style="color: #419eff"
              >查看</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getList, getSousuo, wuliuList } from "@/api/car-register";
export default {
  name: "car-register",
  data() {
    return {
      options: [
        {
          label: "",
          value: "全部",
        },
        {
          label: true,
          value: "可用",
        },
        {
          label: false,
          value: "不可用",
        },
      ],
      title: "回车登记",
      value1: "", //时间
      // 渲染列表
      formData: [],
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      formObj: {
        transportTaskId: "", //编号
        intoStorageEndTime: "", //结束
        intoStorageStartTime: "", //开始
        page: 1,
        pageSize: 10,
        startAgencyId: "", //起始地
        endAgencyId: "", //目的地
        isAvailable: "",
      },
      // 回车事件
      time: [],
    };
  },

  created() {
    this.getlist();
    this.getListInfo();
  },

  methods: {
    // 数据下拉列表
    async getlist() {
      const res = await getList();
      // console.log(res.data);
      const arr = JSON.parse(res.data);
      console.log(arr);
      this.data = arr;
    },
    // 起始地
    handleNodeClick(data) {
      console.log(data.name);
      this.formObj.startAgencyId = data.name;
    },
    // 目的地
    handleNodeClickOne(data) {
      console.log(data.name);
      this.formObj.endAgencyId = data.name;
    },
    // handleClear() {
    //   this.upResName = "";
    // },
    handleClearOne() {
      this.upResNameOne = "";
    },
    // 搜索
    async sousuo() {
      const res = await getSousuo({
        transportTaskId: this.formObj.transportTaskId, //编号
        intoStorageEndTime: this.time[0], //结束
        intoStorageStartTime: this.time[1], //开始
        page: this.formObj.page,
        pageSize: this.formObj.pageSize,
        startAgencyId: this.formObj.startAgencyId, //起始地
        endAgencyId: this.formObj.endAgencyId, //目的地
        isAvailable: this.formObj.isAvailable,
      });
      console.log(res.data.items);
      this.formData = res.data.items;
    },
    // 重置
    reset() {
      console.log("重置");
    },
    // 获取列表
    async getListInfo() {
      const res = await wuliuList({
        page: this.formObj.page,
        pageSize: this.formObj.pageSize,
      });
      console.log(res.data.items);
      this.formData = res.data.items;
    },
    // 查看
    chaKan(row) {
      console.log(row);
      this.$router.push({
        path: "/lookOver",
        query: { row: JSON.stringify(row) },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.gree {
  font-size: 12px;
  width: 6px !important;
  height: 6px !important;
  background-color: #1dc779;
  border-radius: 50%;
  display: inline-block;
}
.red {
  font-size: 12px;
  width: 6px !important;
  height: 6px !important;
  background-color: #1dc779;
  border-radius: 50%;
  display: inline-block;
}
::v-deep .el-card {
  text-align: left;
}
::v-deep .el-card__body {
  line-height: 24px;
  text-align: left;
}
::v-deep .el-input__inner {
  text-align-last: left;
}
::v-deep .el-form-item__content {
  text-align-last: left;
}
</style>
